<!-- yangbuyi Copyright (c) https://yby6.com 2023. -->

<template>
  <u-overlay
    :show="!isConnected"
    :zIndex="zIndex"
    @touchmove.stop.prevent="noop"
    :customStyle="{
      backgroundColor: '#fff',
      display: 'flex',
      justifyContent: 'center',
    }"
  >
    <view class="u-no-network">
      <u-icon
        :name="image"
        size="150"
        imgMode="widthFit"
        class="u-no-network__error-icon"
      ></u-icon>
      <text class="u-no-network__tips">{{ tips }}</text>
      <!-- 只有APP平台，才能跳转设置页，因为需要调用plus环境 -->
      <!-- #ifdef APP-PLUS -->
      <view class="u-no-network__app">
        <text class="u-no-network__app__setting">请检查网络，或前往</text>
        <text class="u-no-network__app__to-setting" @tap="openSettings"
          >设置</text
        >
      </view>
      <!-- #endif -->
      <view class="u-no-network__retry">
        <u-button
          size="mini"
          text="重试"
          type="primary"
          plain
          @click="retry"
        ></u-button>
      </view>
    </view>
  </u-overlay>
</template>

<script>
import props from "./props.js";

/**
 * noNetwork 无网络提示
 * @description 该组件无需任何配置，引入即可，内部自动处理所有功能和事件。
 * @tutorial https://www.uviewui.com/components/noNetwork.html
 * @property {String}			tips 	没有网络时的提示语 （默认：'哎呀，网络信号丢失' ）
 * @property {String | Number}	zIndex	组件的z-index值
 * @property {String}			image	无网络的图片提示，可用的src地址或base64图片
 * @event {Function}			retry	用户点击页面的"重试"按钮时触发
 * @example <u-no-network></u-no-network>
 */
export default {
  name: "u-no-network",
  mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
  data() {
    return {
      isConnected: true, // 是否有网络连接
      networkType: "none", // 网络类型
    };
  },
  mounted() {
    this.isIOS = uni.getSystemInfoSync().platform === "ios";
    uni.onNetworkStatusChange((res) => {
      this.isConnected = res.isConnected;
      this.networkType = res.networkType;
      this.emitEvent(this.networkType);
    });
    uni.getNetworkType({
      success: (res) => {
        this.networkType = res.networkType;
        this.emitEvent(this.networkType);
        if (res.networkType == "none") {
          this.isConnected = false;
        } else {
          this.isConnected = true;
        }
      },
    });
  },
  methods: {
    retry() {
      // 重新检查网络
      uni.getNetworkType({
        success: (res) => {
          this.networkType = res.networkType;
          this.emitEvent(this.networkType);
          if (res.networkType == "none") {
            uni.$u.toast("无网络连接");
            this.isConnected = false;
          } else {
            uni.$u.toast("网络已连接");
            this.isConnected = true;
          }
        },
      });
      this.$emit("retry");
    },
    // 发出事件给父组件
    emitEvent(networkType) {
      this.$emit(networkType === "none" ? "disconnected" : "connected");
    },
    async openSettings() {
      if (this.networkType == "none") {
        this.openSystemSettings();
        return;
      }
    },
    openAppSettings() {
      this.gotoAppSetting();
    },
    openSystemSettings() {
      // 以下方法来自5+范畴，如需深究，请自行查阅相关文档
      // https://ask.dcloud.net.cn/docs/
      if (this.isIOS) {
        this.gotoiOSSetting();
      } else {
        this.gotoAndroidSetting();
      }
    },
    network() {
      var result = null;
      var cellularData = plus.ios.newObject("CTCellularData");
      var state = cellularData.plusGetAttribute("restrictedState");
      if (state == 0) {
        result = null;
      } else if (state == 2) {
        result = 1;
      } else if (state == 1) {
        result = 2;
      }
      plus.ios.deleteObject(cellularData);
      return result;
    },
    gotoAppSetting() {
      if (this.isIOS) {
        var UIApplication = plus.ios.import("UIApplication");
        var application2 = UIApplication.sharedApplication();
        var NSURL2 = plus.ios.import("NSURL");
        var setting2 = NSURL2.URLWithString("app-settings:");
        application2.openURL(setting2);
        plus.ios.deleteObject(setting2);
        plus.ios.deleteObject(NSURL2);
        plus.ios.deleteObject(application2);
      } else {
        var Intent = plus.android.importClass("android.content.Intent");
        var Settings = plus.android.importClass("android.provider.Settings");
        var Uri = plus.android.importClass("android.net.Uri");
        var mainActivity = plus.android.runtimeMainActivity();
        var intent = new Intent();
        intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);
        var uri = Uri.fromParts("package", mainActivity.getPackageName(), null);
        intent.setData(uri);
        mainActivity.startActivity(intent);
      }
    },
    gotoiOSSetting() {
      var UIApplication = plus.ios.import("UIApplication");
      var application2 = UIApplication.sharedApplication();
      var NSURL2 = plus.ios.import("NSURL");
      var setting2 = NSURL2.URLWithString("App-prefs:root=General");
      application2.openURL(setting2);
      plus.ios.deleteObject(setting2);
      plus.ios.deleteObject(NSURL2);
      plus.ios.deleteObject(application2);
    },
    gotoAndroidSetting() {
      var Intent = plus.android.importClass("android.content.Intent");
      var Settings = plus.android.importClass("android.provider.Settings");
      var mainActivity = plus.android.runtimeMainActivity();
      var intent = new Intent(Settings.ACTION_SETTINGS);
      mainActivity.startActivity(intent);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../libs/css/components.scss";

.u-no-network {
  @include flex(column);
  justify-content: center;
  align-items: center;
  margin-top: -100px;

  &__tips {
    color: $u-tips-color;
    font-size: 14px;
    margin-top: 15px;
  }

  &__app {
    @include flex(row);
    margin-top: 6px;

    &__setting {
      color: $u-light-color;
      font-size: 13px;
    }

    &__to-setting {
      font-size: 13px;
      color: $u-primary;
      margin-left: 3px;
    }
  }

  &__retry {
    @include flex(row);
    justify-content: center;
    margin-top: 15px;
  }
}
</style>
